<template>
  <div class="main-content">
    <!-- 顶部表单 -->
    <div class="form-common-box">
      <h-form :model="formData" :rules="rules" ref="formData" inline cols="3" :label-width="80">
        <h-form-item label="勾稽编号" prop="check_code">
          <h-input v-model="formData.check_code" placeholder="请输入"></h-input>
        </h-form-item>
        <h-form-item label="行/列号" prop="test">
          <h-input v-model="formData.test" placeholder="请输入"></h-input>
        </h-form-item>
        <h-form-item label="校验模式" prop="check_mode" multiple>
          <h-select v-model="formData.check_mode" multiple>
            <h-option v-for="item in checkModeList" :value="item.code" :key="item.code">{{ item.codeName }}</h-option>
          </h-select>
        </h-form-item>
        <h-form-item label="勾稽分类" prop="check_type">
          <h-select v-model="formData.check_type" multiple placeholder="请选择">
            <h-option v-for="item in checkTypeList" :value="item.code" :key="item.code">{{ item.codeName }}</h-option>
          </h-select>
        </h-form-item>
				<h-form-item label="勾稽结果" prop="result_status">
          <h-select v-model="formData.result_status" multiple placeholder="请选择">
            <h-option v-for="item in resultStatusList" :value="item.code" :key="item.code">{{ item.codeName }}</h-option>
          </h-select>
        </h-form-item>
				<h-form-item label="来源" prop="rule_source">
          <h-select v-model="formData.rule_source" placeholder="请选择">
            <h-option v-for="item in ruleSourceList" :value="item.code" :key="item.code">{{ item.codeName }}</h-option>
          </h-select>
        </h-form-item>
				<h-form-item label="严重级别" prop="error_level">
          <h-select v-model="formData.error_level" placeholder="请选择">
            <h-option v-for="item in errorLevelList" :value="item.code" :key="item.code">{{ item.codeName }}</h-option>
          </h-select>
        </h-form-item>
				<h-form-item label="是否已豁免" prop="remit_status">
          <h-select v-model="formData.remit_status" placeholder="请选择">
            <h-option v-for="item in remitStatusList" :value="item.code" :key="item.code">{{ item.codeName }}</h-option>
          </h-select>
        </h-form-item>
        <h-form-item :label-width="10">
          <h-button style="margin-right:10px;" type="primary" @click="queryData('btn')">查询</h-button>
          <h-button @click="resetData">重置</h-button>
        </h-form-item>
      </h-form>
    </div>
    <!-- table列表 -->
    <div class="table-operate-box">
      <!-- 按钮 -->
      <div :class="['top-btn']">
        <h-button type="primary" class="btn">勾稽检查</h-button>
				<h-button type="ghost" class="btn">增加豁免</h-button>
				<h-button type="ghost" class="btn">取消豁免</h-button>
				<h-button @click="exportExcel" type="ghost" class="btn">导出</h-button>
      </div>
      <!-- 列表 -->
			<hui-table
				:currentTablePage="currentTablePage"
				@tablePageChange="tablePageChange"
				@pageSizeChange="pageSizeChange"
				@selectionChange="selectionChange"
				:tableConfig="tableConfig"
			></hui-table>
    </div>
  </div>
</template>

<script>
import HuiTable from '@/components/hui-table.vue'
import { reportData, checkModeList, checkTypeList, resultStatusList, ruleSourceList, errorLevelList, remitStatusList } from '@/mock/make-report.js'

const { log } = console //打印输出

export default {
  name: 'proInforMain',
  components: { HuiTable},
  data() {
    return {
			checkModeList,
			checkTypeList,
			resultStatusList,
			ruleSourceList,
			errorLevelList,
			remitStatusList,
      currentTablePage: {
        total: 0,
        size: 10, //	页面大小
        current: 1 //	当前页码
      },
      formData: {
        check_code: '',
        test: '',
        check_mode: [],
        check_type: [],
				result_status: [],
				rule_source: '',
				error_level: '',
				remit_status: ''
      },
      tableConfig: {
        columnsData: [
					{
						type: "selection",
						width: 60,
						align: "center",
					},
          {
            title: '勾稽编号',
            ellipsis: true,
            key: 'check_code',
            width: 110
          },
          {
            title: '勾稽描述',
            key: 'check_name',
            ellipsis: true,
						width: 400
          },
          {
            title: '勾稽结果',
            key: 'result_status',
            ellipsis: true,
            render: (h, params) => {
							return h(
                  'div',
                  {
                    class: {
                      'red': params.row.result_status === 'not_pass',
											'green': params.row.result_status !== 'not_pass'
                    }
                  },
                  params.row.result_status === 'not_pass' ? '勾稽未通过' : '勾稽通过'
                )
            }
          },
          {
            title: '严重级别',
            key: 'error_level',
            ellipsis: true
          },
          {
            title: '来源',
            ellipsis: true,
            key: 'rule_source'
          },
          {
            title: '行/列',
            key: 'test',
            ellipsis: true,
          },
					{
            title: '勾稽公式',
            key: 'test2',
            ellipsis: true,
          },
					{
            title: '校验模式',
            key: 'check_mode',
            ellipsis: true,
						width: 120
          },
					{
            title: '勾稽分类',
            key: 'check_type',
            ellipsis: true,
          },
					{
            title: '豁免操作人',
            key: 'operator',
            ellipsis: true,
          },
					{
            title: '豁免时间',
            key: 'time',
            ellipsis: true,
          },
					{
            title: '豁免备注',
            key: 'remark',
            ellipsis: true,
          },
					{
            title: '分支数据是否校验',
            key: 'check_branch_data',
            ellipsis: true,
						width: 140
          },
					{
            title: '计算模式',
            key: 'calc_mode',
            ellipsis: true,
          },
					{
            title: '勾稽结果备注',
            key: 'result_remark',
            ellipsis: true,
						width: 160
          },
					{
            title: '勾稽时间',
            key: 'result_time',
            ellipsis: true,
						width: 160
          },
        ],
        tableData: []
      },
      rules: {},
			tSelectedAry: []
    }
  },
  mounted() {
	},
  created() {
		this.currentTablePage = { size: 1, total: 2, current: 1 }
		this.tableConfig.tableData = reportData
  },
  methods: {
		selectionChange(selection) {
			this.tSelectedAry = selection
		},
    queryData(flag) {
			return
      if (flag && flag === 'btn') {
        this.currentTablePage.current = this.GLOBALDATA.QUERYRE_DIRECTPAGE
      }
      let param = JSON.parse(JSON.stringify(this.formData))
      //发送请求
      let { size, current } = this.currentTablePage
      let page = { size, current }
      //组装查询数据
      param.page = page
      //发送请求
      queryAllProduct(param).then(res => {
        //给page赋值
        res.data.size = Number(res.data.size)
        res.data.total = Number(res.data.total)
        res.data.current = Number(res.data.current)
        let { size, total, current } = res.data
        this.currentTablePage = { size, total, current }
        this.tableConfig.tableData = res.data.records
      })
    },
    resetData() {
      this.$refs.formData.resetFields()
    },
    // 页码改变-----开始
    tablePageChange(i) {
      this.currentTablePage.current = i.current
      this.queryData()
    },
    pageSizeChange(val) {
      this.currentTablePage.size = val.size
      this.queryData()
    },
    exportExcel() {
			this.$service(
				{
					url: this.$url.exportMakeReport + '?tag=' + this.tSelectedAry.map(u => u.id)[0],
					method: "get",
					responseType: "blob",
				}
			).then((res) => {
				const { data, headers } = res
				const fileName = headers['content-disposition'].split("filename=")[1]
				// 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理
				const blob = new Blob([data])
				let dom = document.createElement("a")
				let url = window.URL.createObjectURL(blob)
				dom.href = url
				dom.download = fileName //下载后文件名
				dom.style.display = "none"
				document.body.appendChild(dom)
				dom.click()
				dom.parentNode.removeChild(dom)
				window.URL.revokeObjectURL(url)
			})
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
